<template>
  <div>
    <a-menu
      mode="inline"
      :open-keys="openKeys"
      style="width: 256px"
      @openChange="onOpenChange"
    >
      <a-sub-menu v-for="chapter in setTree" :key="chapter.key">
        <span slot="title"
          ><a-icon type="check" /><span>{{ chapter.name }}</span></span
        >
        <a-menu-item
          :key="section.key"
          v-for="section in chapter.children"
          @click="jumpEdit(section)"
        >
          {{ section.name }}
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script>
export default {
  props: {
    chapterData: {
      require: true,
      defaults: () => ({}),
    },
    homeworkData: {
      require: true,
      defaults: () => ({}),
    },
  },
  computed: {
    setTree() {
      const arr = []
      this.chapterData.forEach(el => {
        const children = []
        this.homeworkData.forEach(item => {
          if (item.chapter_key === el.key) children.push(item)
        })
        arr.push({
          key: el.key,
          name: el.name,
          children,
        })
      })
      return arr
    },
  },
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
      openKeys: [],
    }
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      )
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    jumpEdit(val) {
      const { key } = val
      console.log(val)
      this.$router.push(`/study/homeworkManage/${key}`)
      // 维护content中的isCheck
      this.$store.dispatch('saveHomeworkManageMenuData', val)
    },
  },
}
</script>
